<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        v-model="listQuery.provinceAndCity"
        placeholder="区域"
        style="width: 200px;"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      />
      <el-select
        v-model="listQuery.channelId"
        filterable
        clearable
        :filter-method="dataFilter"
        placeholder="选择渠道"
        style="width: 150px;"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      >
        <el-option
          v-for="item in options"
          :key="item.channelId"
          :label="item.channel_name"
          :value="item.channelId"
        />
      </el-select>
      <!-- <el-select
        v-model="listQuery.authState"
        placeholder="认证状态"
        style="width: 150px;"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      >
        <el-option style="width: auto" label="未认证" :value="0">未认证</el-option>
        <el-option style="width: auto" label="已认证" :value="1">已认证</el-option>
      </el-select> -->
      <el-button
        v-waves
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
      >
        搜索
      </el-button>
      <!-- <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">
        新增
      </el-button> -->
    </div>

    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="tableData"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column label="昵称" align="center" width="120">
        <template slot-scope="{ row }">
          <span>{{ row.nick }}</span>
        </template>
      </el-table-column>
      <el-table-column label="性别" align="center" width="60">
        <template slot-scope="{ row }">
          <span>{{ row.sex }}</span>
        </template>
      </el-table-column>
      <el-table-column label="联系方式" align="center" width="120">
        <template slot-scope="{ row }">
          <span>{{ row.phone }}</span>
        </template>
      </el-table-column>
      <el-table-column label="所在区域" align="center" width="180">
        <template slot-scope="{ row }">
          <span>{{ row.ProvinceAndCity }}</span>
        </template>
      </el-table-column>
      <el-table-column label="详细地址" align="center" width="80">
        <template slot-scope="{ row }">
          <span>{{ row.addressDetail }}</span>
        </template>
      </el-table-column>
      <el-table-column label="职业信息" align="center" width="100">
        <template slot-scope="{ row }">
          <span>{{ row.occupation }}</span>
        </template>
      </el-table-column>
      <el-table-column label="月收入" align="center" width="80">
        <template slot-scope="{ row }">
          <span>{{ row.income }}</span>
        </template>
      </el-table-column>
      <el-table-column label="工资发放" align="center" width="80">
        <template slot-scope="{ row }">
          <span>{{ row.incomeSource }}</span>
        </template>
      </el-table-column>
      <el-table-column label="营业执照" class-name="status-col" width="100">
        <template slot-scope="{ row }">
          <span>{{ row.businessLicense }}</span>
        </template>
      </el-table-column>
      <el-table-column label="企业流水" class-name="status-col" width="100">
        <template slot-scope="{ row }">
          <span>{{ row.enterpriseFlow }}</span>
        </template>
      </el-table-column>
      <el-table-column label="借款金额" align="center" width="80">
        <template slot-scope="{ row }">
          <span>{{ row.loanAmount }}</span>
        </template>
      </el-table-column>
      <el-table-column label="借款原因" align="center" width="80">
        <template slot-scope="{ row }">
          <span>{{ row.loanReason }}</span>
        </template>
      </el-table-column>
      <el-table-column label="借款期限" align="center" width="80">
        <template slot-scope="{ row }">
          <span>{{ row.loanTerm }}</span>
        </template>
      </el-table-column>
      <el-table-column label="有无公积金" align="center" width="100">
        <template slot-scope="{ row }">
          <span>{{ row.accumulationFund }}</span>
        </template>
      </el-table-column>
      <el-table-column label="有无社保" align="center" width="100">
        <template slot-scope="{ row }">
          <span>{{ row.socialInsurance }}</span>
        </template>
      </el-table-column>
      <el-table-column label="有无微粒贷" align="center" width="100">
        <template slot-scope="{ row }">
          <span>{{ row.microLoan }}</span>
        </template>
      </el-table-column>
      <el-table-column label="有无保险" align="center" width="100">
        <template slot-scope="{ row }">
          <span>{{ row.insuranceOwner }}</span>
        </template>
      </el-table-column>
      <el-table-column label="有无车" class-name="status-col" width="100">
        <template slot-scope="{ row }">
          <span>{{ row.carOwner }}</span>
        </template>
      </el-table-column>
      <el-table-column label="有无房" class-name="status-col" width="100">
        <template slot-scope="{ row }">
          <span>{{ row.houseOwner }}</span>
        </template>
      </el-table-column>
      <el-table-column label="紧急联系人姓名" width="150" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.contactName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="紧急联系人电话" width="150" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.contactPhone }}</span>
        </template>
      </el-table-column>
      <el-table-column label="紧急联系人详细地址" width="150" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.address }}</span>
        </template>
      </el-table-column>
      <el-table-column label="银行卡号" class-name="status-col" width="200">
        <template slot-scope="{ row }">
          <span>{{ row.cardNo }}</span>
        </template>
      </el-table-column>
      <el-table-column label="银行机构" class-name="status-col" width="140">
        <template slot-scope="{ row }">
          <span>{{ row.cardOrg }}</span>
        </template>
      </el-table-column>
      <el-table-column label="渠道" class-name="status-col" width="100">
        <template slot-scope="{ row }">
          <span>{{ row.nickname }}</span>
        </template>
      </el-table-column>
      <el-table-column label="公司类型" class-name="status-col" width="100">
        <template slot-scope="{ row }">
          <span>{{ row.companyType }}</span>
          <!-- <el-tag v-if="row.level == 0">普通用户</el-tag>
          <el-tag v-if="row.level == 1" type="success">会员</el-tag>
          <el-tag v-if="row.level == 2" type="info">特约会员</el-tag>
          <el-tag v-if="row.level == 3" type="danger">测试会员</el-tag> -->
        </template>
      </el-table-column>
      <el-table-column label="信用卡额度" min-width="120" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.reg_datetime }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="操作" align="center" width="200" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <el-button type="primary" size="mini" @click="handleUpdate(row)">
            用户详情
          </el-button>

        </template>
      </el-table-column> -->
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.current"
      :limit.sync="listQuery.size"
      @pagination="getUserFilterList"
    />

    <el-dialog
      :title="textMap[dialogStatus]"
      width="80%"
      :visible.sync="dialogFormVisible"
    >
      <div class="nick">用户 {{ userBaseInfo.nick }}</div>
      <div class="link-top" />
      <!-- 基本信息 -->
      <div class="box">
        <div class="title">基本信息</div>
        <div class="link-title" />
        <table>
          <tr>
            <td><div class="info-name">用户ID</div></td>
            <td>
              <div class="info">{{ userBaseInfo.userId }}</div>
            </td>
            <td class="info-name"><div class="info-name">邮箱</div></td>
            <td>
              <div class="info">{{ userBaseInfo.email }}</div>
            </td>
          </tr>
          <tr>
            <td><div class="info-name">手机号</div></td>
            <td>
              <div class="info">{{ userBaseInfo.phone }}</div>
            </td>
            <td><div class="info-name">月薪</div></td>
            <td>
              <div v-if="userBaseInfo.income == 1" class="info">
                Below 10000
              </div>
              <div v-if="userBaseInfo.income == 2" class="info">
                10000-20000
              </div>
              <div v-if="userBaseInfo.income == 3" class="info">
                20000-30000
              </div>
              <div v-if="userBaseInfo.income == 4" class="info">
                More than 30000
              </div>
            </td>
          </tr>
          <tr>
            <td><div class="info-name">注册时间</div></td>
            <td>
              <div class="info">{{ userBaseInfo.regTime }}</div>
            </td>
            <td><div class="info-name">登录时间</div></td>
            <td>
              <div class="info">
                {{
                  userBaseInfo.loginTime == '' ? '未知' : userBaseInfo.loginTime
                }}
              </div>
            </td>
          </tr>
          <tr>
            <td><div class="info-name">姓名</div></td>
            <td>
              <div class="info">{{ userBaseInfo.name }}</div>
            </td>
            <td><div class="info-name">Pan</div></td>
            <td>
              <div class="info">{{ userBaseInfo.pan }}</div>
            </td>
          </tr>
        </table>
      </div>
      <!-- 认证情况 -->
      <div class="box">
        <div class="title">认证情况</div>
        <div class="link-title" />
        <table>
          <tr>
            <td><div class="info-name">认证状态</div></td>
            <td>
              <div :class="userBaseInfo.state == 0 ? 'fail' : 'ok'">
                {{ userBaseInfo.state == 0 ? '未认证' : '已认证' }}
              </div>
            </td>
          </tr>
          <tr>
            <td><div class="info-name">实名信息认证</div></td>
            <td>
              <div :class="userBaseInfo.authIdentity == 0 ? 'fail' : 'ok'">
                {{ userBaseInfo.authIdentity == 0 ? '未认证' : '已认证' }}
              </div>
            </td>
            <td><div class="info-name">基本信息认证</div></td>
            <td>
              <div :class="userBaseInfo.authBaseInfo == 0 ? 'fail' : 'ok'">
                {{ userBaseInfo.authBaseInfo == 0 ? '未认证' : '已认证' }}
              </div>
            </td>
            <td><div class="info-name">联系信息认证</div></td>
            <td>
              <div :class="userBaseInfo.authContact == 0 ? 'fail' : 'ok'">
                {{ userBaseInfo.authContact == 0 ? '未认证' : '已认证' }}
              </div>
            </td>
          </tr>
        </table>
      </div>
      <!-- 会员信息 -->
      <div class="box">
        <div class="title">会员信息</div>
        <div class="link-title" />
        <table>
          <tr>
            <td><div class="info-name">会员等级</div></td>
            <td>
              <div v-if="userBaseInfo.vipLevel === 0" class="info">
                普通用户
              </div>
              <div v-if="userBaseInfo.vipLevel === 1" class="info">普通卡</div>
              <div v-if="userBaseInfo.vipLevel === 2" class="info">金卡</div>
              <div v-if="userBaseInfo.vipLevel === 3" class="info">至臻卡</div>
            </td>
            <td><div class="info-name">关联订单号</div></td>
            <td>
              <div class="info">{{ userBaseInfo.orderNo }}</div>
            </td>
          </tr>
          <tr>
            <td><div class="info-name">开通时间</div></td>
            <td>
              <div class="info">{{ userBaseInfo.vipGmtTime }}</div>
            </td>
            <td><div class="info-name">失效时间</div></td>
            <td>
              <div class="info">{{ userBaseInfo.vipFadeTime }}</div>
            </td>
          </tr>
        </table>
      </div>
      <!-- 联系信息 -->
      <div class="box">
        <div class="title">联系信息</div>
        <div class="link-title" />
        <table>
          <tr>
            <td><div class="info-name">手机号</div></td>
            <td>
              <div class="info">{{ userBaseInfo.phone }}</div>
            </td>
            <td><div class="info-name">邮箱</div></td>
            <td>
              <div class="info">{{ userBaseInfo.contactEmail }}</div>
            </td>
          </tr>
          <tr>
            <td><div class="info-name">联系人</div></td>
            <td>
              <div class="info">{{ userBaseInfo.contactName }}</div>
            </td>
            <td><div class="info-name">手机号</div></td>
            <td>
              <div class="info">{{ userBaseInfo.contactPhone }}</div>
            </td>
          </tr>
        </table>
      </div>
      <!-- 订单信息 -->
      <div class="box">
        <div class="title">订单信息</div>
        <div class="link-title" />
        <table>
          <tr>
            <td><div class="info-name">订单号</div></td>
            <td>
              <div class="info">{{ userBaseInfo.orderNo }}</div>
            </td>
            <td><div class="info-name">创建时间</div></td>
            <td>
              <div class="info">{{ userBaseInfo.orderGmtDatetime }}</div>
            </td>
          </tr>
          <tr>
            <td><div class="info-name">状态</div></td>
            <td>
              <div class="info">
                <span v-if="userBaseInfo.orderState == 1">等待用户支付</span>
                <span v-if="userBaseInfo.orderState == 2" class="success"
                  >支付成功</span
                >
                <span v-if="userBaseInfo.orderState == 3">支付失败</span>
              </div>
            </td>
            <td><div class="info-name">备注</div></td>
            <td>
              <div class="info">{{ userBaseInfo.remark }}</div>
            </td>
          </tr>
          <tr>
            <td><div class="info-name">用途</div></td>
            <td>
              <div class="info">{{ userBaseInfo.longText }}</div>
            </td>
            <td><div class="info-name">利息</div></td>
            <td>
              <div class="info">{{ userBaseInfo.interest }}</div>
            </td>
            <!-- 字段暂无 -->
            <!-- <td><div class="info-name">息费</div></td>
            <td><div class="info">10000</div></td> -->
          </tr>
        </table>
      </div>
      <!-- 关联流水 -->
      <div v-if="userBaseInfo.userOrderFlows != null" class="box">
        <div class="title">关联流水</div>
        <div class="link-title" />
        <el-table
          :key="tableKey"
          v-loading="listLoading"
          :data="userBaseInfo.userOrderFlows"
          border
          fit
          highlight-current-row
          style="width: 90%;margin-top:10px;margin-left:5%;"
        >
          <el-table-column label="支付渠道" align="center" width="80">
            <template slot-scope="{ row }">
              <span>{{ row.platform }}</span>
            </template>
          </el-table-column>
          <el-table-column label="流水号" width="200" align="center">
            <template slot-scope="{ row }">
              <span>{{ row.flowNo }}</span>
            </template>
          </el-table-column>
          <el-table-column label="金额" width="80" align="center">
            <template slot-scope="{ row }">
              <span>{{ row.price }}</span>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" min-width="160" align="center">
            <template slot-scope="{ row }">
              <span>{{ row.gmtDatetime }}</span>
            </template>
          </el-table-column>
          <el-table-column label="状态" class-name="status-col" width="100">
            <template slot-scope="{ row }">
              <el-tag v-if="row.state == 0" type="info">创建订单</el-tag>
              <el-tag v-if="row.state == 1" type="info">待支付</el-tag>
              <el-tag v-if="row.state == 2" type="success">支付成功</el-tag>
              <el-tag v-if="row.state == 3" type="danger">支付失败</el-tag>
              <el-tag v-if="row.state == 4" type="info">待退款</el-tag>
              <el-tag v-if="row.state == 5" type="info">退单成功</el-tag>
              <el-tag v-if="row.state == 6" type="info">退单失败</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="备注" class-name="status-col" width="100">
            <template slot-scope="{ row }">
              <span>{{ row.note }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 退款明细 -->
      <div v-if="userBaseInfo.userRefundDetails != null" class="box">
        <div class="title">退款明细</div>
        <div class="link-title" />
        <table
          v-for="refundDetail in userBaseInfo.userRefundDetails"
          :key="refundDetail"
        >
          <tr>
            <td><div class="info-name">会员订单号</div></td>
            <td>
              <div class="info">{{ refundDetail.orderNo }}</div>
            </td>
            <td><div class="info-name">退款状态</div></td>
            <td>
              <div class="info">
                <el-tag v-if="refundDetail.state == 4" type="info"
                  >待退款</el-tag
                >
                <el-tag v-if="refundDetail.state == 5" type="warning"
                  >退款成功</el-tag
                >
                <el-tag v-if="refundDetail.state == 6" type="info"
                  >退款失败</el-tag
                >
              </div>
            </td>
          </tr>
          <tr>
            <td><div class="info-name">退款订单号</div></td>
            <td>
              <div class="info">{{ refundDetail.refundNo }}</div>
            </td>
            <td><div class="info-name">备注</div></td>
            <td>
              <div class="info">{{ refundDetail.tips }}</div>
            </td>
          </tr>
          <tr>
            <td><div class="info-name">图片证据</div></td>
            <td colspan="3">
              <div>
                <img class="pic" :src="refundDetail.p1" alt="Picture Lost" />
                <img class="pic" :src="refundDetail.p2" alt="Picture Lost" />
                <img class="pic" :src="refundDetail.p3" alt="Picture Lost" />
              </div>
            </td>
          </tr>
        </table>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          关闭
        </el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogPvVisible" title="Reading statistics">
      <el-table
        :data="pvData"
        border
        fit
        highlight-current-row
        style="width: 100%"
      >
        <el-table-column prop="key" label="Channel" />
        <el-table-column prop="pv" label="Pv" />
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogPvVisible = false"
          >Confirm</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getUserFilterList,
  getPhoneUserDetail,
  getChannelIdAndNick
} from '@/api/user';
import waves from '@/directive/waves'; // waves directive
import Pagination from '@/components/Pagination'; // secondary package based on el-pagination
export default {
  name: 'Authlist',
  components: { Pagination },
  directives: { waves },
  data() {
    return {
      tableData: [],
      total: 0,
      tableKey: 0,
      listQuery: {
        current: 1,
        size: 10,
        phone: ''
      },
      userBaseInfo: {
        login_datetime: '',
        authBaseInfo: 1,
        authContact: 1,
        authIdentity: 1,
        contactEmail: '额阅读是因为',
        contactName: '李小龙',
        contactPhone: '13333398469',
        email: '-',
        interest: 33.33,
        level: 0,
        loginTime: null,
        longText: 'Daily Consume',
        nick: '13012345678',
        orderGmtDatetime: '2020-05-13T09:48:35',
        phone: '13012345678',
        regAddress: 'http://127.0.0.1:8083/doc.html',
        regIp: '127.0.0.1',
        regTime: '2020-05-07T08:37:10',
        state: 1,
        userAuthId: 11,
        userId: 6,
        userOrderFlows: null,
        vipId: 1,
        vipNo: null
      },
      times: [],
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: '用户详情',
        create: '新增'
      },
      dialogPvVisible: false,
      pvData: [],
      rules: {
        type: [
          { required: true, message: 'type is required', trigger: 'change' }
        ],
        timestamp: [
          {
            type: 'date',
            required: true,
            message: 'timestamp is required',
            trigger: 'change'
          }
        ],
        username: [
          { required: true, message: 'title is required', trigger: 'blur' }
        ]
      },
      downloadLoading: false,
      listLoading: false,
      optionsCopy: [],
      options: [],
      value: ''
    };
  },
  created() {
    this.getUserFilterList(this.listQuery);
    this.getChannelIdAndNick();
  },
  methods: {
    dataFilter(val) {
      this.value = val;
      if (val) {
        // val存在
        this.options = this.optionsCopy.filter(item => {
          if (
            !!~item.channel_name.indexOf(val) ||
            !!~item.channel_name.toUpperCase().indexOf(val.toUpperCase())
          ) {
            return true;
          }
        });
      } else {
        // val为空时，还原数组
        this.options = this.optionsCopy;
      }
    },
    async getChannelIdAndNick() {
      const res = await getChannelIdAndNick(this.listQuery);
      res.data.data.forEach(element => {
        if (element.channel_name !== null) {
          this.optionsCopy.push(element);
          this.options.push(element);
        }
      });
    },
    // 获取用户列表
    async getUserFilterList(listQuery) {
      const res = await getUserFilterList(this.listQuery);
      this.tableData = res.data.data.records;
      this.total = res.data.data.total;
    },
    handleFilter() {
      this.listQuery.current = 1;
      if (this.times == null) {
        this.listQuery.endTime = '';
        this.listQuery.startTime = '';
      } else if (this.times.length === 0) {
        this.listQuery.endTime = '';
        this.listQuery.startTime = '';
      } else {
        this.listQuery.endTime = this.times[1];
        this.listQuery.startTime = this.times[0];
      }
      this.getUserFilterList(this.listQuery);
    },
    async handleUpdate(row) {
      const res = await getPhoneUserDetail({ userId: row.userId });
      console.log(res.data.data);
      if (res.data.data === null) {
        this.$notify({
          title: '错误',
          message: '更新失败',
          type: 'fail',
          duration: 2000
        });
      }
      this.userBaseInfo = res.data.data;
      this.temp = Object.assign({}, row); // copy obj
      this.temp.timestamp = new Date(this.temp.timestamp);
      this.dialogStatus = 'update';
      this.dialogFormVisible = true;
    },
    handleDelete(row, index) {
      this.$notify({
        title: '成功',
        message: '删除成功',
        type: 'success',
        duration: 2000
      });
      this.list.splice(index, 1);
    },
    getSortClass: function(key) {
      const sort = this.listQuery.sort;
      return sort === `+${key}` ? 'ascending' : 'descending';
    }
  }
};
</script>

<style scoped>
.pic {
  width: 150px;
  margin-top: 10px;
  margin-left: 10px;
}
.ok {
  margin-left: 10px;
  margin-top: 10px;
  font-weight: 5 00;
  color: rgb(35, 248, 124);
}
.fail {
  margin-left: 10px;
  margin-top: 10px;
  font-weight: 5 00;
  color: rgb(240, 174, 76);
}
.info {
  margin-left: 10px;
  margin-top: 10px;
  font-weight: 5 00;
}
.info-name {
  margin-left: 50px;
  margin-top: 10px;
  color: rgb(0, 0, 0);
}
.title {
  margin-top: 0px;
  margin-left: 10px;
  font-size: 20px;
  font-weight: 400;
  border-bottom: 1px dashed #304156;
  padding-bottom: 10px;
}
.box {
  margin-top: 10px;
  width: 100%;
  border: solid #304156 1px;
  padding: 20px 10px;
  border-radius: 10px;
}
.nick {
  font-size: 30px;
  font-weight: 600;
  border-bottom: solid #d6d6d6 2px;
  padding-bottom: 10px;
}
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
</style>
